@extends('layouts.console_header')

@section('title', '个人地推')

@section('resources')
    @parent
<style>
    .user_salesman_search li{overflow: hidden;margin: 20px;}
    .user_salesman_search li .message{float: left;color: #808080;line-height: 30px;}
    .user_salesman_search li .message span{margin-right: 20px;}
    .user_salesman_search li .erweima{float: right;width: 120px;border: 1px solid #808080;height: 30px;line-height: 30px;text-align: center;border-radius: 5px;}
    .create_salesman{float: right;width: 120px;height: 30px;line-height: 30px;text-align: center;background-color: #9955c6;color: #fff;cursor: pointer;border-radius: 5px;}
    .user_list_search{float: left;}
    .user_list_search input{width: 200px;height: 30px;border: 1px solid #000;padding: 0 5px;}
    .user_list_search .user_list_searchbtn{height: 30px;margin-left: 10px;width: 50px;background-color: #9955c6;color: #fff;border: none;border-radius: 5px;}
    .display{text-align: center;background-color: #fff;border-collapse:collapse;}
    .display th{padding: 20px 0;}
    .display #tbody_content{border-top: 1px solid #000;border-bottom: 1px solid #000;font-size: 14px;}
    .display #tbody_content tr:nth-child(2n+1){border-bottom: 1px solid #ddd;background-color: #f9f9f9;}
    .display #tbody_content tr:nth-child(2n){border-bottom: 1px solid #ddd;}
    .display #tbody_content tr td{padding: 10px 0;}
    .display #tbody_content tr td:nth-child(1){background-color: #f1f1f1;}
    #create_user_salesman{position: absolute;width: 500px;height: 410px;box-shadow: 0px 0px 5px 5px rgba(128,128,128,0.5);top: 50%;left: 50%;margin-left: -250px;margin-top: -205px;background-color: #fff;display: none;}
    #create_user_salesman .title{padding: 10px 20px;overflow: hidden;margin-bottom: 30px;}
    #create_user_salesman .title span{float: left;width: 435px;text-align: center;height: 25px;font-size: 22px;color: #9955c6;}
    #create_user_salesman .title img{float: left;width: 25px;height: 25px;}
    #create_user_salesman .center{overflow: hidden;margin: 20px;}
    #create_user_salesman .center span{float: left;width: 100px;height: 30px;text-align: right;margin-right: 10px;line-height: 30px;}
    #create_user_salesman .center input{float: left;width: 280px;height: 30px;border: 1px solid #808080;border-radius: 5px;padding: 0 5px;}
    #create_user_salesman .center select{float: left;width: 290px;height: 30px;border: 1px solid #808080;border-radius: 5px;padding: 0 5px;}
    #create_user_salesman .center textarea{float: left;width: 280px;height: 90px;border: 1px solid #808080;border-radius: 5px;padding: 5px;}
    #create_user_salesman .button input{width: 100px;height: 30px;border-radius: 5px;}
    #create_user_salesman .button{overflow: hidden;margin-top: 40px;}
    #create_user_salesman .button .create_sure{background-color: #9955c6;color: #fff;float: left;margin-left: 130px;cursor: pointer;}
    #create_user_salesman .button .create_cancel{background-color: #fff;color: #808080;border: 1px solid #808080;float: right;margin-right: 80px;cursor: pointer;}

    .shop_eweima{position: fixed;top: 200px;left: 50%;width: 550px;padding-bottom: 10px;margin-left: -275px;background-color: #fff;border: 1px solid #333;display: none;z-index: 1001;}
    .shop_eweima_content li{text-align: center;margin: 10px;}
    .shop_eweima .shop_downloadewm{width: 350px;height: 40px;margin: 0 125px;background-color: #9955c6;color: #fff;border-radius: 10px;position: absolute;bottom: 20px;}
    .shop_title{height: 50px;line-height: 50px;border-bottom: 1px solid #333;}
    .shop_title p{width: 500px;text-align: center;}
    .shop_title img{width: 30px;margin: 10px;}
    .prompt_double{width: 500px;position: fixed;top: 200px;left: 50%;margin-left: -250px;background-color: #fff;z-index: 1001;box-shadow: 0px 0px 5px 5px rgba(128,128,128,0.5);}
    .prompt_double .title{font-size: 24px;margin-top: 10px;color: #9955c6;text-align: center;}
    .prompt_double .content{font-size: 18px;color: #808080;margin-top: 40px;padding: 0 60px;text-align: center;}
    .new_shop_eweima_content .content{font-size: 18px;color: #808080;margin-top: 40px;padding: 0 60px;text-align: center;}
    .prompt_double .content input{font-size: 14px;width: 300px;height: 30px;border: 1px solid #000;padding: 0 5px;}
    .new_shop_eweima_content .content input{font-size: 14px;width: 300px;height: 30px;border: 1px solid #000;padding: 0 5px;}
    .prompt_double .close_pic{width: 30px;height: 30px;position: absolute;top: 10px;right: 10px;}
    .prompt_double .button{margin-top: 30px;font-size: 24px;}
    .new_shop_eweima_content .button{margin-top: 30px;font-size: 24px;}
    .prompt_double .button button{width: 100px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;cursor: pointer;}
    /*.new_shop_eweima_content .button button{width: 100px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;cursor: pointer;}*/
    .prompt_double .button .cancel{margin: 10px 0 30px 20px;background-color: #eee;}
    .new_shop_eweima_content .button .new_shop_cancel{margin: 10px 0 30px 20px;background-color: #eee;width: 100px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;cursor: pointer;}
    .prompt_double .button .sure{margin: 10px 20px 30px 0;cursor: pointer;}
    .new_shop_eweima_content .button .sure{margin: 10px 20px 30px 0;cursor: pointer;}
    .prompt_success{width: 100px;position: fixed;top: 250px;left: 50%;margin-left: -60px;background: rgba(0,0,0,0.5);padding: 10px;z-index: 1002;text-align: center;color: #fff;display: none;}
    .prompt_double .count_down{font-size: 18px;color: red;margin-top: 10px;padding: 0 60px;text-align: center;display: none;}
    .new_shop_eweima{border-bottom: 1px solid #aaa;padding: 0 10px;cursor: pointer;}
</style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;"><span style="color: #7f7f7f;"><a href="/console/index">首页</a>>地推管理></span><span class="co_violet">个人地推</span></p>
	</div>
    <ul class="user_salesman_search">
        <li>
            <p class="user_list_search">
                <input type="text" name="search" value="{{$search}}" placeholder="请输入个人地推账号搜索">
                <input class="user_list_searchbtn" type="button" name="submit_search" value="搜索">
            </p>
            <p class="create_salesman">创建个人地推</p>
        </li>
        <li>
            <p class="message">
                <span>合计：{{$total}}位个人地推</span>
                <span>注册用户数：{{$registercount}}</span>
                <span>订单数：{{$ordercount}}</span>
                <span>地推订单数：{{$ordervalidcount}}</span>
                <span>地推订单实付：{{$ordertotalamount}}</span>
                <span>充值数：{{$rechargecount}}</span>
                <span>地推收入：￥{{$totalgetmoney}}</span>
            </p>
            <a class="erweima" href="/console/salesman/user/qrcode/batch/generate?cityid={{$cityid}}">批量生成二维码</a>
        </li>
    </ul>
    <div>
        
    </div>
	<table class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>序号</th>
                <th>个人地推账号</th>
                <th>姓名</th>
                <th>二维码编号</th>
                <th>注册用户数</th>
                <th>订单数</th>
                <th>地推订单数</th>
                <th>地推订单实付</th>
                <th>充值数</th>
                <th>地推收入(元)</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>序号</th>
                <th>个人地推账号</th>
                <th>姓名</th>
                <th>二维码编号</th>
                <th>注册用户数</th>
                <th>订单数</th>
                <th>地推订单数</th>
                <th>地推订单实付</th>
                <th>充值数</th>
                <th>地推收入(元)</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </tfoot>
        <tbody id="tbody_content">
            @foreach($userlist as $list)
            <tr>
            @if(!isset($i))
                <td>{{$i=1}}</td>
            @else
                <td>{{++$i}}</td>
            @endif
                <td>{{$list['mobile']}}</td>
                <td>{{$list['name']}}</td>
                <td>{{$list['qrcode']}}</td>
                <td>{{$list['registernum']}}</td>
                <td>{{$list['ordernum']}}</td>
                <td>{{$list['ordervalidnum']}}</td>
                <td>{{$list['ordertotalamount']}}</td>
                <td>{{$list['rechargenum']}}</td>
                <td>{{$list['totalmoney']}}</td>
            @if($list['status'] == 1)
                <td>可用</td>
            @else
                <td>不可用</td>
            @endif
                <td>
                    <a style="color: #9955c6;" href="/console/salesman/user/details?salesmanid={{$list['salesmanid']}}&cityid={{$cityid}}">详情</a>
                @if($list['qrcode'] == '')
                    <a class="co_violet" href="#" style="margin: 0 10px;" onclick="bindeweima('{{$list['salesmanid']}}')">绑定二维码</a>
                @else
                    <a class="co_violet" href="#" style="margin: 0 10px;" onclick="shop_eweima('{{$list['salesmanid']}}','{{$list['mobile']}}','{{$list['name']}}','{{$list['qrcode']}}')">二维码</a>
                @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <form action="" method="" id="create_user_salesman">
        <p class="title">
            <span class="fl content">创建个人地推</span>
            <img style="cursor: pointer;" class="fr create_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
        </p>
        <p class="center">
            <span>姓名：</span>
            <input type="text" name="username" value="" maxlength="5">
        </p>
        <p class="center">
            <span>手机号：</span>
            <input type="text" name="mobile" value="">
        </p>
        <p class="center">
            <span>地推方案：</span>
            <select name="salesmansetid" id="">
            <option value="0">请选择</option>
            @foreach($usersalesmansetlist as $list)
                <option value="{{$list['salesmansetid']}}">{{$list['name']}}</option>
            @endforeach
            </select>
        </p>
        <p class="center">
            <span>备注：</span>
            <textarea name="remark" id="" cols="30" rows="10"></textarea>
        </p>
        <p class="button">
            <input class="create_sure" type="button" name="" value="确定">
            <input class="create_cancel" type="button" name="" value="取消">
        </p>
    </form>
    <form action="" method="" class="shop_eweima">
        <div class="shop_title oh">
            <p class="fl">个人地推二维码</p>
            <img class="fr shop_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
        </div>
        <ul class="shop_eweima_content">
            <li id="output"></li>
            <li class="co_violet" style="font-size: 20px;"><span class="eweimashopname"></span></li>
            <!-- <li class="fz_16 co_gray56"><span>门店地址 ：</span><span class="eweimashopaddress"></span></li> -->
            <li class="fz_16" style="color: #aaa;"><span class="new_shop_eweima">绑定新的二维码</span></li>
        </ul>
        <div class="new_shop_eweima_content" style="display: none;">
            <p class="content">
                {{--<input type="hidden" name="salesmanid" value="">--}}
                <input type="text" name="qrcode" value="" placeholder="请输入二维码编号或使用扫描枪识别二维码">
            </p>
            <p class="button oh">
                <input type="button" name="" value="取消" class="fl new_shop_cancel">
                <input type="button" name="" value="确定" class="fr sure">
            </p>
        </div>
    </form>
</section>
@endsection

@section('scriptResources')
    @parent
    <script type="text/javascript" src="{{env('JS_DOMAIN')}}js/jquery.qrcode.min.js"></script>
    <script>
        var city_id = '{{$cityid}}';
        var web_url = '{{env('WEB_URL')}}';

        //搜索
        $("input[name='submit_search']").click(function() {
            var search = $("input[name='search']").val();
            window.location.href = '/console/salesman/user/list?cityid=' + city_id + '&search=' + search;
        });
        $(".create_salesman").click(function(){
            $("#create_user_salesman").show();
        });
        $(".create_cancel").click(function(){
            $("#create_user_salesman").hide();
        });
        $(".create_close").click(function(){
            $("#create_user_salesman").hide();
        });
        $(".create_sure").click(function(){
            var mobile = $("input[name='mobile']").val();
            var user_name = $("input[name='username']").val();
            var remark = $("textarea[name='remark']").val();
            var salesman_set_id = $("select[name='salesmansetid']").find("option:selected").val();
            if(user_name == ""){
                alert("请输入姓名");return false;
            }else if(mobile == ""){
                alert("请输入手机号");return false;
            }else if(salesman_set_id == "0") {
                alert("请选择地推方案");return false;
            } else{
                $.ajax({
                    url:'/console/salesman/user/add',
                    type: 'post',
                    data:{
                        'cityid':city_id,
                        'mobile':mobile,
                        'username':user_name,
                        'remark':remark,
                        'salesmansetid':salesman_set_id
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.status == 'success') {
                            alert(data.message);
                            //$(".shop_newadd").hide();
                            location.reload();
                        } else {
                            alert(data.message);
                       }
                    }
                })
            }
        })
        var bindEweima = $('<form action="" method="" class="prompt_double">'+
                            '<img class="fr close_pic" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">'+
                            '<p class="title">绑定二维码</p>'+
                            '<p class="content"><input type="hidden" name="salesmanid" value="">' +
                            '<input type="text" name="qrcode" value="" placeholder="请输入二维码编号或使用扫描枪识别二维码"></p>'+
                            '<p class="button oh">'+
                                '<input type="button" name="" value="取消" class="fl cancel">'+
                                '<input type="button" name="" value="确定" class="fr sure">'+
                            '</p>'+
                        '</form>');
        var downEweima = $('<form action="" method="" class="prompt_double">'+
                            '<img class="fr close_pic" src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">'+
                            '<p class="title">批量生成二维码</p>'+
                            '<p class="content">批量生成100个二维码，新生成的二维码未绑定任何商家。是否生成并打包下载二维码？</p>'+
                            '<p class="count_down">正在启动下载...倒计时<span class="count_down_time">5</span>秒</p>'+
                            '<p class="button oh">'+
                                '<input type="button" name="" value="取消" class="fl cancel">'+
                                '<a href="/console/shop/qrcode/batch/generate?cityid={{$cityid}}&count=100"><input type="button" name="" value="确定" class="fr sure"></a>'+
                            '</p>'+
                        '</form>');
        //绑定二维码
        function bindeweima(salesmanid){
            $(".public_prompt_mark").show();
            $(".public_prompt_mark").height($(window).height());
            $('body').append(bindEweima);
            $(".prompt_double input[name='salesmanid']").val(salesmanid);
            $(".prompt_double .sure").click(function(){
                var shopqrcode=$(".prompt_double input[name='qrcode']").val();
                var salesmanid=$(".prompt_double input[name='salesmanid']").val();
                if(shopqrcode == '') {
                    alert("请输入二维码编号"); return;
                }
                $.ajax({
                    url : '/console/salesman/user/qrcode/binding',
                    type : 'post',
                    data: {
                        cityid:city_id,
                        salesmanid:salesmanid,
                        qrcode:shopqrcode
                    },
                    dataType:'json',
                    async: true,
                    success:function(data){
                        if(data.status == 'success') {
                            alert(data.message);
                            window.location.reload();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            });
            $(".prompt_double .cancel").click(function(){
                $(".public_prompt_mark").hide();
                $(".prompt_double").remove();
            });
            $(".prompt_double .close_pic").click(function(){
                $(".public_prompt_mark").hide();
                $(".prompt_double").remove();
            });
        };
        //重新绑定二维码
        function new_shop_eweima(salesmanid){
            $(".shop_eweima_content").hide();
            $(".new_shop_eweima_content").show();
            $(".new_shop_eweima_content .sure").click(function(){
                var shopqrcode=$(".new_shop_eweima_content input[name='qrcode']").val();
                // var shopid=$(".new_shop_eweima_content input[name='shopid']").val();
                if(shopqrcode == '') {
                    alert("请输入二维码编号"); return;
                }
                $.ajax({
                    url : '/console/salesman/user/qrcode/binding',
                    type : 'post',
                    data: {
                        cityid:city_id,
                        salesmanid:salesmanid,
                        qrcode:shopqrcode
                    },
                    dataType:'json',
                    async: true,
                    success:function(data){
                        if(data.status == 'success') {
                            alert(data.message);
                            window.location.reload();
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                    }
                });
            });
        };
        $(".shop_close").on('click',function(){
            $(this).parent().parent().hide();
            $(".public_prompt_mark").hide();
        });
        $(".new_shop_cancel").click(function(){
            $(".shop_eweima_content").show();
            $(".new_shop_eweima_content").hide();
            $(".new_shop_eweima_content input[name='qrcode']").val('');
            $(".new_shop_eweima_content input[name='shopid']").val('');
        });
        // 二维码  
        function shop_eweima(salesmanid, mobile, name, qrcode){
            $('#output').html("");
            $(".eweimashopname").text(name+'('+mobile+')');
            // $(".eweimashopaddress").text(address);
            $(".shop_eweima").show();
            $(".shop_eweima_content").show();
            $(".public_prompt_mark").show();
            $(".public_prompt_mark").height($(window).height());
            $(".new_shop_eweima_content").hide();
            //var qrcode = JSON.stringify({type:'payment', content:shopid});
            //var qrcodeurl = web_url + "qrcode/shop/" + shopid;
            var qrcodeurl = web_url + "qrcode/user/" + qrcode;
            $('#output').qrcode(qrcodeurl);
            $(".new_shop_eweima").click(function(){
                new_shop_eweima(salesmanid);
            });
        };
    </script>
@endsection